<template>
  <div class="cockpit">
    <div class="cockpit-content">
      <div class="cockpit-title">资产统计信息</div>
      <div class="cockpit-info">
        <div class="cockpit-info-left">
          <div class="info-left-item">
            <p>资产类别：</p>
            <el-select
              v-model="form.propertyCategoryId"
              placeholder="请选择"
              style="width: 100%"
              @change="choseChange"
              clearable
            >
              <el-option
                v-for="item in pcategoryList"
                :key="item.propertyCategoryId"
                :label="item.pcategoryName"
                :value="item.propertyCategoryId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="info-left-item">
            <p>所属单位：</p>
            <el-select
              v-model="form.ownershipId"
              placeholder="请选择"
              style="width: 100%"
              @change="choseChange"
              clearable
            >
              <el-option
                v-for="item in dataArr"
                :key="item.ownershipId"
                :label="item.ownershipName"
                :value="item.ownershipId"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="info-left-item">
            <p>管理部门：</p>
            <el-cascader
              v-model="form.manageDeptId"
              :options="deptsList"
              :show-all-levels="false"
              style="width: 100%"
              clearable
              filterable
              @change="choseChange"
            ></el-cascader>
          </div> -->
          <div class="info-left-item">
            <p>所在社区：</p>
            <el-select
              v-model="form.propertyCommunity"
              placeholder="请选择"
              style="width: 100%"
              clearable
              @change="choseChange"
            >
              <el-option
                v-for="item in communityList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="cockpit-info-right">
          <div class="info-right-left">
            <div class="title">租赁协议智能提醒</div>
            <div class="info-content">
              <dl @click="leaseRemindClick(2)">
                <dt>{{ leaseInfo && leaseInfo.leaseRemindNum }}</dt>
                <dd>提醒</dd>
              </dl>
              <dl @click="leaseRemindClick(1)">
                <dt>{{ leaseInfo && leaseInfo.leaseUrgencyNum }}</dt>
                <dd>紧急</dd>
              </dl>
              <dl @click="leaseRemindClick(0)">
                <dt>{{ leaseInfo && leaseInfo.leaseOverdueNum }}</dt>
                <dd>超期</dd>
              </dl>
            </div>
          </div>
          <div class="info-right-right">
            <div class="title">租金缴纳智能提醒</div>
            <div class="info-content">
              <dl @click="leaseRentRemindClick(2)">
                <dt>{{ leaseInfo && leaseInfo.leaseRentRemindNum }}</dt>
                <dd>提醒</dd>
              </dl>
              <dl @click="leaseRentRemindClick(1)">
                <dt>{{ leaseInfo && leaseInfo.leaseRentUrgencyNum }}</dt>
                <dd>紧急</dd>
              </dl>
              <dl @click="leaseRentRemindClick(0)">
                <dt>{{ leaseInfo && leaseInfo.leaseRentOverdueNum }}</dt>
                <dd>超期</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics-info">
        <div class="statistics-item">
          <dl>
            <dt>资产地块总数</dt>
            <dd>{{ landareaInfo && landareaInfo.propertyNum }}</dd>
          </dl>
        </div>
        <div class="statistics-item">
          <dl>
            <dt>总建筑面积</dt>
            <dd>{{ buildingInfo && buildingInfo.buildingAreaAllTotal }}㎡</dd>
          </dl>
        </div>
        <div class="statistics-item">
          <dl>
            <dt>总宗地面积</dt>
            <dd>
              {{
                landareaInfo && landareaInfo.propertyAncestralLandAreaTotal
              }}㎡
            </dd>
          </dl>
        </div>
        <div class="statistics-item">
          <dl>
            <dt>建筑面积（非经营性资产）</dt>
            <dd>{{ (fjyxSum && fjyxSum.toFixed(2)) || 0 }}㎡</dd>
          </dl>
        </div>
        <div class="statistics-item">
          <dl>
            <dt>建筑面积（经营性资产）</dt>
            <dd>{{ (jyxSum && jyxSum.toFixed(2)) || 0 }}㎡</dd>
          </dl>
        </div>
      </div>
      <div class="chart-info">
        <div class="chart-info-item">
          <div class="chart-title">资产类型分析</div>
          <div
            ref="buildPiechart"
            class="chart"
            style="width: 90%; height: 350px"
          />
        </div>
        <div class="chart-info-item">
          <div class="chart-title">经营性分析</div>
          <div
            ref="areaPiechart"
            class="chart"
            style="width: 90%; height: 300px"
          />
        </div>
        <div class="chart-info-item">
          <div class="chart-title">资产类别分析</div>
          <div
            ref="areaOrBuildLinechart"
            class="chart"
            style="width: 100%; height: 300px"
          />
        </div>
      </div>
      <!-- <div class="cockpit-title">资产盘活</div> -->

      <div class="chart-info" style="margin-bottom: 25px">
        <div class="chart-info-item">
          <div class="chart-title">资产使用情况</div>
          <div
            ref="useLinechartRef"
            class="chart"
            style="width: 100%; height: 300px"
          />
        </div>
        <div class="chart-info-item">
          <div class="chart-title">租户统计</div>
          <div class="tenant">
            <div class="info-content">
              <dl>
                <dt>
                  {{
                    (leaseUserGroupInfo && leaseUserGroupInfo.leaseUserNum) || 0
                  }}
                </dt>
                <dd>有偿租赁户数</dd>
              </dl>
              <dl>
                <dt>
                  {{
                    (leaseUserGroupInfo && leaseUserGroupInfo.noLeaseUserNum) ||
                    0
                  }}
                </dt>
                <dd>无偿租赁户数</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="chart-info-item">
          <div class="chart-title">租户情况分析</div>
          <div
            ref="zichanPiechartRef"
            class="chart"
            style="width: 100%; height: 300px"
          />
        </div>
      </div>

      <div class="chart-info" style="margin-bottom: 25px">
        <div class="chart-info-item">
          <div class="chart-title">资产数据统计</div>
          <div class="chart-table">
            <table>
              <tr>
                <th style="width: 20%">资产类型</th>
                <th style="width: 20%">总量</th>
                <th style="width: 20%">出租量</th>
                <th style="width: 20%">可租量</th>
              </tr>
              <tr
                v-for="(item, index) in propertyHomeList"
                :key="index"
                :class="[activeIndex === index ? 'active' : '']"
                @click="itemClick(item, index)"
              >
                <td style="width: 20%">{{ item.propertyTypeName }}</td>
                <td
                  style="width: 20%"
                  v-if="item.propertyTypeCode == 'property_type_gongyu'"
                >
                  {{ item.suiteTotal || 0 }}间
                </td>
                <td style="width: 20%" v-else>
                  {{ item.buildingAreaTotal || 0 }}㎡
                </td>
                <td style="width: 20%">
                  <span
                    v-if="
                      item.propertyTypeCode ==
                        'property_type_shuilijichusheshi' ||
                      item.propertyTypeCode == 'property_type_huanweisheshi' ||
                      item.propertyTypeCode == 'property_type_tingchechang'
                    "
                  >
                    __
                  </span>
                  <span
                    v-else-if="item.propertyTypeCode == 'property_type_gongyu'"
                    >{{
                      item.leaseSuiteTotal + item.usageSuiteTotal || 0
                    }}间</span
                  >
                  <span v-else>{{ item.leaseAreaTotal || 0 }}㎡</span>
                </td>
                <td style="width: 20%">
                  <span
                    v-if="
                      item.propertyTypeCode ==
                        'property_type_shuilijichusheshi' ||
                      item.propertyTypeCode == 'property_type_huanweisheshi' ||
                      item.propertyTypeCode == 'property_type_tingchechang'
                    "
                  >
                    __
                  </span>
                  <span
                    v-else-if="item.propertyTypeCode == 'property_type_gongyu'"
                    >{{ item.freeSuiteTotal || 0 }}间</span
                  >
                  <span v-else>{{ item.freeAreaTotal || 0 }}㎡ </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="chart-info-item" style="flex: 1">
          <div class="chart-title">资产详情</div>
          <div class="chart-table">
            <table>
              <thead>
                <tr>
                  <th style="width: 5%">序号</th>
                  <th style="width: 10%">资产地块编号</th>
                  <th style="width: 15%">资产地块名称</th>
                  <th style="width: 10%">资产类型</th>
                  <th style="width: 10%">总量</th>
                  <th style="width: 10%">出租量</th>
                  <th style="width: 10%">可租量</th>
                  <th style="width: 10%">使用率</th>
                </tr>
              </thead>
              <!-- <div style="height: 230px; overflow-y: auto"> -->
              <tr v-for="(item, index) in buildingDetail" :key="index">
                <td style="width: 5%">{{ index + 1 }}</td>
                <td style="width: 10%">
                  {{ item.propertyCode }}
                </td>
                <td style="width: 15%">{{ item.propertyName }}</td>
                <td style="width: 10%">{{ item.propertyTypeName }}</td>
                <td
                  style="width: 10%"
                  v-if="item.propertyTypeCode == 'property_type_gongyu'"
                >
                  {{ item.suiteTotal || 0 }}间
                </td>
                <td style="width: 10%" v-else>
                  {{ item.buildingAreaTotal || 0 }}㎡
                </td>

                <td
                  style="width: 10%"
                  v-if="item.propertyTypeCode == 'property_type_gongyu'"
                >
                  {{ item.leaseSuiteTotal + item.usageSuiteTotal || 0 }}间
                </td>
                <td style="width: 10%" v-else>
                  {{
                    (
                      parseFloat(item.leaseAreaTotal) +
                      parseFloat(item.usageAreaTotal)
                    ).toFixed(2) || 0
                  }}㎡
                </td>
                <td style="width: 10%">
                  <span
                    v-if="
                      item.propertyTypeCode ==
                        'property_type_shuilijichusheshi' ||
                      item.propertyTypeCode == 'property_type_huanweisheshi' ||
                      item.propertyTypeCode == 'property_type_tingchechang'
                    "
                  >
                    __
                  </span>
                  <span
                    v-else-if="item.propertyTypeCode == 'property_type_gongyu'"
                    >{{ item.freeSuiteTotal || 0 }}间</span
                  >
                  <span v-else>
                    {{ item.freeAreaTotal || 0 }}
                  </span>
                </td>
                <td
                  style="width: 10%"
                  v-if="item.propertyTypeCode == 'property_type_gongyu'"
                >
                  {{
                    (item.usageSuiteRate &&
                      (item.usageSuiteRate * 100).toFixed(2)) ||
                    0
                  }}%
                </td>
                <td style="width: 10%" v-else>
                  {{
                    (item.usageRate && (item.usageRate * 100).toFixed(2)) || 0
                  }}%
                </td>
              </tr>
              <!-- </div> -->
            </table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="租赁协议智能提醒"
      :visible.sync="leaseRemindDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-table :data="leaseRemindTableData" style="width: 100%" height="350px">
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="ownershipName"
          label="权属"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="propertyCode"
          label="资产地块编号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="propertyName" label="资产地块" align="center">
        </el-table-column>
        <el-table-column
          prop="propertyCommunityName"
          label="所在社区"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="remindNum" :label="remindLabel" align="center">
          <template slot-scope="scope">
            <span
              v-if="remindStatus === 2"
              style="
                color: #0052d9;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 1"
              style="
                color: #f1902b;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 0"
              style="
                color: #e34d59;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leaseRemindDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="租金缴纳智能提醒"
      :visible.sync="leaserentRemindDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-table
        :data="leaserentRemindTableData"
        style="width: 100%"
        height="350px"
      >
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="ownershipName"
          label="权属"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="propertyCode"
          label="资产地块编号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="propertyName" label="资产地块" align="center">
        </el-table-column>
        <el-table-column
          prop="propertyCommunityName"
          label="所在社区"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="remindNum" :label="remindLabel" align="center">
          <template slot-scope="scope">
            <span
              v-if="remindStatus === 2"
              style="
                color: #0052d9;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 1"
              style="
                color: #f1902b;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 0"
              style="
                color: #e34d59;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leaserentRemindDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  propertyOwnList,
  areaList,
  cockpitLeaseremind,
  cockpitLeaseremindList,
  cockpitleaserentremindList,
  cockpitPropertyLandareaList,
  cockpitBuildingRegisterareaList,
  // cockpitleaserentYearGroup,
  cockpitFreePropertyUnitList,
  propertyPcategoryList,
  cockpitPropertyUsageGroup,
  cockpitLeaseuserTypeGroup,
  leaseUserGroup,
  cockpitPropertyCategoryGroup,
  cockpitBuildingDetail,
} from "@/api/shops";

import { leaseUserTotal } from "@/api/tenant";
export default {
  data() {
    return {
      leaseRemindDialogVisible: false,
      leaseRemindTableData: [], //租赁协议智能提醒
      remindLabel: "数量",
      leaserentRemindDialogVisible: false,
      leaserentRemindTableData: [], //租金缴纳智能提醒

      form: {
        propertyCategoryId: undefined,
        ownershipId: undefined,
        manageDeptId: undefined,
        propertyCommunity: undefined,
        propertyTypeCode: undefined,
      },
      leaseInfo: null,
      landareaInfo: null,
      buildingInfo: null,
      leaserentYearInfo: null,
      statisticsInfo: null,
      freePropertyUnitList: [],
      propertyHomeList: [],
      dataArr: [], // 权属
      pcategoryList: [], // 资产类别
      deptsList: [], // 管理部门
      communityList: [], // 所在社区listareaList
      buildChartPie: null,
      areaChartPie: null,
      areaOrBuildLine: null,
      spPiechart: null,
      gyCategoryStackChart: null,
      yearLinechart: null,
      useLinechart: null,
      activeIndex: 0,
      remindStatus: 2,
      leaseNumInfo: null,
      buildingDetail: [], // 资产详情
      proCategoryGroup: [],
      usageGroupList: [], //资产使用情况
      leaseUserTypeGroup: [], //资产租户情况分析
      leaseUserGroupInfo: null,
      jyxSum: 0,
      fjyxSum: 0,
    };
  },
  computed: {
    rowState() {
      return {
        backgroundColor: "#DAECFF",
        color: "#000",
      };
    },
    headerRowState() {
      return {
        color: "#fff",
        background: "#3085FF!important",
      };
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.getPropertyOwnList();
      this.getPropertyPcategoryList();
      this.getListDept();
      this.getAreaList();
      this.initBuildPieChart();
      this.initAreaPieChart();
      this.initAreaOrBuildLineChart();
      this.getZichanPiechart();
      this.initSpPiechart();
      // this.inityearLineChart();
      this.getUseLinechart();
    });
    this.getCockpitLeaseremind();
    this.getPropertyOwnList();
    this.getPropertyPcategoryList();
    this.getCockpitPropertyCategoryGroup();
    this.getCockpitLeaseuserTypeGroup();
    this.getLeaseUserGroup();
    this.getCockpitPropertyLandareaList();
    this.getCockpitBuildingRegisterareaList();
    this.getCockpitFreePropertyUnitList();
    this.getCockpitPropertyUsageGroup();

    this.getListDept();
    this.getAreaList();
    // this.inityearLineChart();
    this.getLeaseUserTotal();
  },
  methods: {
    choseChange() {
      this.getCockpitLeaseremind();
      this.getCockpitPropertyLandareaList();
      this.getCockpitLeaseuserTypeGroup();
      this.getLeaseUserGroup();
      this.getCockpitBuildingRegisterareaList();
      this.getCockpitPropertyUsageGroup();
      this.getCockpitFreePropertyUnitList();
      this.getCockpitPropertyCategoryGroup();
    },
    shopRouter(row) {
      this.$router.push({
        path: "/shops/index",
        component: () => import("@/views/shops/index"),
      });
      let info = {
        manageDeptName: "",
        propertyName: "",
        propertyId: row.propertyId,
      };
      localStorage.setItem("propertyinfo", JSON.stringify(info));
    },
    tableHeaderColor() {
      return "background-color: #afccfd; color:#000000;";
    },
    removeEmptyChildren(arr) {
      return arr.map((item) => {
        if (item.children.length === 0) {
          return {
            label: item.deptName,
            value: item.deptId,
          };
        } else {
          return {
            label: item.deptName,
            value: item.deptId,
            children: this.removeEmptyChildren(item.children),
          };
        }
      });
    },
    // 租户总数
    getLeaseUserTotal() {
      let params = {};
      leaseUserTotal(params).then((res) => {
        if (res.code === 200) {
          this.leaseNumInfo = res.data;
        }
      });
    },
    getPropertyOwnList() {
      propertyOwnList().then((res) => {
        this.dataArr = res.data;
        this.dataArr.unshift({
          ownershipName: "全部",
          ownershipId: "",
        });
      });
    },

    getPropertyPcategoryList() {
      propertyPcategoryList().then((res) => {
        this.pcategoryList = res.data;
        this.pcategoryList.unshift({
          pcategoryName: "全部",
          propertyCategoryId: "",
        });
      });
    },

    // 部门管理
    getListDept() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));

      if (userInfo && userInfo.depts.length > 0) {
        userInfo.depts.unshift({
          children: [],
          deptName: "全部",
          deptId: "",
        });
        this.deptsList = this.removeEmptyChildren(userInfo.depts);
      }
    },
    getCockpitLeaseremind() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };

      cockpitLeaseremind(params).then((res) => {
        if (res.code == 200) {
          this.leaseInfo = res.data;
        }
      });
    },
    //租赁协议智能提醒
    leaseRemindClick(remindStatus) {
      this.remindStatus = remindStatus;
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
        remindStatus,
      };
      cockpitLeaseremindList(params).then((res) => {
        if (res.code == 200) {
          // this.leaseRemindDialogVisible = true;
          this.leaseRemindTableData = res.data;
          let type = "";
          if (remindStatus === 0) {
            type = "超期";
          } else if (remindStatus === 1) {
            type = "紧急";
          } else if (remindStatus === 2) {
            type = "提醒";
          }
          this.remindLabel = `${type}数量`;
        }
      });
    },

    //租金缴纳智能提醒
    leaseRentRemindClick(remindStatus) {
      this.remindStatus = remindStatus;
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
        remindStatus,
      };
      cockpitleaserentremindList(params).then((res) => {
        if (res.code == 200) {
          // this.leaserentRemindDialogVisible = true;
          this.leaserentRemindTableData = res.data;
          let type = "";
          if (remindStatus === 0) {
            type = "超期";
          } else if (remindStatus === 1) {
            type = "紧急";
          } else if (remindStatus === 2) {
            type = "提醒";
          }
          this.remindLabel = `${type}数量`;
        }
      });
    },
    //宗地面积与资产地块总数
    getCockpitPropertyLandareaList() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };

      cockpitPropertyLandareaList(params).then((res) => {
        if (res.code == 200) {
          this.landareaInfo = res.data;
        }
      });
    },

    // 驾驶舱 资产类别分析
    getCockpitPropertyCategoryGroup() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };
      cockpitPropertyCategoryGroup(params).then((res) => {
        if (res.code == 200) {
          this.proCategoryGroup = res.data;
          this.initAreaOrBuildLineChart();
        }
      });
    },
    //资产租户情况分析
    getCockpitLeaseuserTypeGroup() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };
      cockpitLeaseuserTypeGroup(params).then((res) => {
        if (res.code == 200) {
          this.leaseUserTypeGroup = res.data;

          // if (res.data && res.data.length > 0) {
          //   this.userTotal = res.data
          //     .map((v) => v.leaseUserNum)
          //     .reduce((sum, num) => {
          //       return sum + num;
          //     });
          // } else {
          //   this.userTotal = 0;
          // }
          this.getZichanPiechart();
        }
      });
    },

    getLeaseUserGroup() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };
      leaseUserGroup(params).then((res) => {
        if (res.code == 200) {
          this.leaseUserGroupInfo = res.data;
        }
      });
    },

    //建筑面积与证载面积对比
    getCockpitBuildingRegisterareaList() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
      };

      cockpitBuildingRegisterareaList(params).then((res) => {
        if (res.code == 200) {
          this.buildingInfo = res.data;
          this.initBuildPieChart();
          this.propertyHomeList = this.buildingInfo.list;
          this.initAreaPieChart();

          // 初始化选择第一个资产类型
          let target = this.propertyHomeList[this.activeIndex];
          if (target && target.propertyTypeCode) {
            this.getCockpitBuildingDetail(target.propertyTypeCode);
          }

          // this.statisticsInfo = this.propertyHomeList[this.activeIndex];
          // this.initSpPiechart();
          // this.getCockpitFreePropertyUnitList();
        }
      });
    },

    // 查询盘活情况的分布列表
    getCockpitFreePropertyUnitList() {
      let params = {
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
        propertyTypeCode:
          this.statisticsInfo && this.statisticsInfo.propertyTypeCode,
      };
      cockpitFreePropertyUnitList(params).then((res) => {
        if (res.code == 200) {
          this.freePropertyUnitList = res.data;
        }
      });
    },
    itemClick(item, index) {
      this.activeIndex = index;
      this.statisticsInfo = Object.assign({}, item);
      // 资产详情
      if (item && item.propertyTypeCode) {
        this.getCockpitBuildingDetail(item.propertyTypeCode);
      }
    },

    // 资产详情
    getCockpitBuildingDetail(propertyTypeCode) {
      this.buildingDetail = [];
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        propertyCommunity: this.form.propertyCommunity,
        propertyTypeCode: propertyTypeCode,
        ownershipId: this.form.ownershipId,
      };
      cockpitBuildingDetail(params).then((res) => {
        if (res.code === 200) {
          if (this.propertyHomeList.length > 0) {
            this.buildingDetail = res.data;
          } else {
            this.buildingDetail = [];
          }
        }
      });
    },
    //资产使用情况
    getCockpitPropertyUsageGroup() {
      let params = {
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        manageDeptId:
          this.form.manageDeptId && this.form.manageDeptId.length > 0
            ? this.form.manageDeptId[0]
            : "",
        propertyCommunity: this.form.propertyCommunity,
        propertyTypeCode:
          this.statisticsInfo && this.statisticsInfo.propertyTypeCode,
      };
      cockpitPropertyUsageGroup(params).then((res) => {
        if (res.code == 200) {
          this.usageGroupList = res.data;
          this.getUseLinechart();
        }
      });
    },

    // 所在社区
    getAreaList() {
      let params = {
        areaName: "",
        parentId: "",
      };
      areaList(params).then((res) => {
        this.communityList = res.data;
        this.communityList.unshift({
          areaName: "全部",
          areaId: "",
        });
      });
    },
    initBuildPieChart() {
      this.buildChartPie = this.$echarts.init(this.$refs.buildPiechart);
      let option = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c}%",
        },
        legend: {
          top: "center",
          right: "0",
          orient: "vertical",
          show: true,
          itemWidth: 10, // 标签宽度为20px
          itemHeight: 10, // 标签高度为10px
          data:
            this.buildingInfo &&
            this.buildingInfo.list
              .map((v) => v.propertyTypeName)
              .filter((j) => j),
        },
        color: [
          "#FFB447",
          "#6FE1FF",
          "#CB6AE4",
          "#A081FF",
          "#F8D441",
          "#68B2FF",
          "#A081FF",
          "#FC91CA",
          "#376DF7",
          "#00827F",
          "#376DF7",
          "#53B997",
        ],
        series: [
          {
            name: "",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "60%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 5,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: this.buildingInfo.list
              .map((v) => {
                return {
                  value: v.buildingAreaTotal,
                  name: v.propertyTypeName,
                };
              })
              .filter((j) => j.name || j.value),
          },
        ],
      };
      this.buildChartPie.setOption(option);
    },
    initAreaPieChart() {
      this.areaChartPie = this.$echarts.init(this.$refs.areaPiechart);
      let jyx = this.propertyHomeList.filter((v) => v.businessNature === 1);
      let fjyx = this.propertyHomeList.filter((v) => v.businessNature === 0);
      let landareaInfo = [];
      if (jyx && jyx.length > 0) {
        this.jyxSum = jyx
          .map((v) => v.buildingAreaTotal)
          .reduce((sum, num) => {
            return sum + num;
          });
        this.fjyxSum = fjyx
          .map((v) => v.buildingAreaTotal)
          .reduce((sum, num) => {
            return sum + num;
          });
        landareaInfo = [
          {
            value: this.jyxSum.toFixed(2),
            name: "经营性",
          },
          {
            value: this.fjyxSum.toFixed(2),
            name: "非经营性",
          },
        ];
      }

      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "20",
          // right: "20",
          // orient: "vertical",
          show: true,
          itemWidth: 6, // 标签宽度为20px
          itemHeight: 6, // 标签高度为10px
          formatter: (name) => {
            for (let i = 0; i < landareaInfo.length; i++) {
              if (landareaInfo[i].name === name) {
                return name + " " + landareaInfo[i].value + "㎡"; // 返回图例名称和数值
              }
            }

            return name;
          },
        },
        color: ["#376DF7", "#F9C84B"],
        series: [
          {
            name: "经营性分析",
            type: "pie",
            radius: ["0%", "50%"],
            center: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}:{d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              normal: {
                length: 10, //第一条线
                length2: 10, //第二条线
                lineStyle: {
                  width: 1, // 线条的宽度
                  // color: "#000", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },
            data: landareaInfo,
          },
        ],
      };
      this.areaChartPie.setOption(option);
    },
    initAreaOrBuildLineChart() {
      this.areaOrBuildLine = this.$echarts.init(
        this.$refs.areaOrBuildLinechart
      );
      let colorList = ["#376DF7", "#53B997", "#A081FF"];
      let data = this.proCategoryGroup.map((v, i) => {
        return {
          name: v.pcategoryName,
          value: v.buildingAreaTotal,
          itemStyle: { color: colorList[i] },
        };
      });
      let option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "15%",
        },
        legend: {
          data:
            this.proCategoryGroup &&
            this.proCategoryGroup.length > 0 &&
            this.proCategoryGroup.map((v) => v.pcategoryName),
          show: true,
          itemWidth: 6, // 标签宽度为20px
          itemHeight: 6, // 标签高度为10px
        },

        xAxis: {
          type: "category",
          data:
            this.proCategoryGroup &&
            this.proCategoryGroup.length > 0 &&
            this.proCategoryGroup.map((v) => v.pcategoryName),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // name: "资产类别分析",
            label: {
              show: true,
              position: "top",
            },
            type: "bar",
            data: data,
          },
        ],
      };
      this.areaOrBuildLine.setOption(option);
    },

    // 公寓 资产利用情况统计图表
    initcategoryStackchart() {
      this.gyCategoryStackChart = this.$echarts.init(
        this.$refs.categoryStackchart
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["1人间", "2人间", "4人间", "6人间", "8人间"],
        },
        series: [
          {
            name: "已租赁",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 20,
            itemStyle: {
              color: "#376df7",
            },
            emphasis: {
              focus: "series",
            },
            data: [20, 32, 31, 33, 39],
          },
          {
            name: "已使用",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 20,
            itemStyle: {
              color: "#6750aa",
            },
            emphasis: {
              focus: "series",
            },
            data: [12, 13, 10, 13, 9],
          },
          {
            name: "空置",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 20,
            itemStyle: {
              color: "#53b997",
            },
            emphasis: {
              focus: "series",
            },
            data: [22, 18, 19, 23, 29],
          },
        ],
      };
      this.gyCategoryStackChart.setOption(option);
    },

    initSpPiechart() {
      this.spPiechart = this.$echarts.init(this.$refs.spPiechart);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "center",
          right: "20",
          orient: "vertical",
          show: true,
          itemWidth: 6, // 标签宽度为20px
          itemHeight: 6, // 标签高度为10px
          textStyle: {
            // 数据右对齐样式
            color: "#000",
            rich: {
              a: {
                // legend左边的文字
                width: 50,
                fontSize: 10,
                padding: [3, 10, 0, 0], // 1.左边的文字添加右边距10(可自己调整)
              },
              b: {
                // legend右边的值
                fontSize: 12,
                backgroundColor: "transparent", // 2.右边的值添加背景色
                align: "right", // 3.右对齐
                padding: [5, -100, 0, 0], // 4.设置右边距为-100(-70/-80..可自己调整)
              },
            },
          },
        },
        series: [
          {
            name: "资产利用情况统计图表",
            type: "pie",
            // radius: ["35%", "60%"],
            center: ["40%", "55%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}:{d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              normal: {
                length: 10, //第一条线
                length2: 10, //第二条线
                lineStyle: {
                  width: 1, // 线条的宽度
                  // color: "#000", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },
            data: [
              {
                value: this.statisticsInfo && this.statisticsInfo.freeAreaTotal,
                name: "空置",
                itemStyle: { color: "#D8D8D8" },
              },
              {
                value:
                  this.statisticsInfo && this.statisticsInfo.leaseAreaTotal,
                name: "已租赁",
                itemStyle: { color: "#4175F8" },
              },
              {
                value:
                  this.statisticsInfo && this.statisticsInfo.usageAreaTotal,
                name: "已使用",
                itemStyle: { color: "#5CBD9C" },
              },
            ],
          },
        ],
      };
      this.spPiechart.setOption(option);
    },
    // 资产使用情况
    getUseLinechart() {
      this.useLinechart = this.$echarts.init(this.$refs.useLinechartRef);
      let option = {
        tooltip: {
          show: true,
          formatter: "{b}:{c}",
        },
        grid: {
          left: "5%",
          top: "20%",
          right: "10%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          top: "bottom",
          show: true,
        },
        xAxis: {
          type: "value",
          show: true,
          // position: 'top',
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C8C8C",
            },
          },
          splitLine: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            splitLine: {
              //网格线
              show: false,
            },
            inverse: "true", //排序
            axisLine: {
              show: true,
              lineStyle: {
                color: "#8C8C8C",
              },
            },
            data: ["无偿使用", "有偿租赁", "可租量"],
          },
        ],
        series: [
          {
            // name: '能耗值',
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}",
                textStyle: {
                  color: "#000", //color of value
                },
              },
            },
            itemStyle: {
              normal: {
                show: true,
                borderWidth: 0,
                borderColor: "#333",
              },
            },
            barGap: "0%",
            barCategoryGap: "50%",
            data: [
              {
                value:
                  this.usageGroupList && this.usageGroupList[0].usageAreaTotal,
                name: "无偿使用",
                itemStyle: { color: "#F8C541", show: true },
              },
              {
                value:
                  this.usageGroupList && this.usageGroupList[0].leaseAreaTotal,
                name: "有偿租赁",
                itemStyle: { color: "#53B997" },
              },
              {
                value:
                  this.usageGroupList && this.usageGroupList[0].freeAreaTotal,
                name: "可租量",
                itemStyle: { color: "#376DF7" },
              },
            ],
          },
        ],
      };
      this.useLinechart.setOption(option);
    },
    // 资产租户情况分析
    getZichanPiechart() {
      this.zichanPiechart = this.$echarts.init(this.$refs.zichanPiechartRef);
      this.leaseUserTypeGroup.forEach((v) => {
        if (v.leaseUserType === 1) {
          v.name = "企业/个体户";
        } else if (v.leaseUserType === 2) {
          v.name = "个人";
        }
      });
      let landareaInfo = this.leaseUserTypeGroup.map((v) => {
        return {
          name: v.name,
          value: v.leaseUserNum,
        };
      });
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "20",
          // right: "20",
          // orient: "vertical",
          show: true,
          itemWidth: 6, // 标签宽度为20px
          itemHeight: 6, // 标签高度为10px
          formatter: (name) => {
            for (let i = 0; i < landareaInfo.length; i++) {
              if (landareaInfo[i].name === name) {
                return name + " " + landareaInfo[i].value; // 返回图例名称和数值
              }
            }

            return name;
          },
        },
        color: ["#376DF7", "#F9C84B"],
        series: [
          {
            name: "资产租户情况分析",
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}:{d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              normal: {
                length: 10, //第一条线
                length2: 10, //第二条线
                lineStyle: {
                  width: 1, // 线条的宽度
                  // color: "#000", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },
            data: landareaInfo,
          },
        ],
      };
      this.zichanPiechart.setOption(option);
    },

    inityearLineChart() {
      this.yearLinechart = this.$echarts.init(this.$refs.yearLinechart);
      let option = {
        // backgroundColor: "#020F37",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          data:
            this.leaserentYearInfo && this.leaserentYearInfo.length > 0
              ? this.leaserentYearInfo.map((v) => v.payRentYear)
              : [],
          type: "category",
          boundaryGap: true,
          itemStyle: {
            borderColor: "blue",
            color: "#000",
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: "微软雅黑",
              // color: '#5DCFF6',
              color: "#000",

              fontSize: "12",
            },
          },
        },
        yAxis: {
          name: "(万元)",
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#f2f2f2",
            },
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: "微软雅黑",
              // color: '#5DCFF6',
              color: "#000",

              fontSize: "12",
            },
          },
        },
        grid: {
          left: "0%",
          top: "15%",
          right: "0%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            data:
              this.leaserentYearInfo && this.leaserentYearInfo.length > 0
                ? this.leaserentYearInfo.map((v) => v.rentAmount)
                : [],
            name: "",
            type: "line",
            // symbol: 'circle',
            // symbol: "emptyCircle",
            smooth: false,
            symbolSize: 7,
            lineStyle: {
              width: 2,
              type: "solid",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#2F69FF",
              color: "#2F69FF",
            },
            areaStyle: {
              color: "#F4F65B",
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      // color: 'RGBA(184, 204, 241, 1)'
                      color: "rgba(47, 105, 255, 1)",
                    },
                    {
                      offset: 0.5,
                      // color: 'RGBA(184, 204, 241, 0.5)'
                      color: "rgba(47, 105, 255, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                      // color: '#283D46'
                    },
                  ],
                  false
                ),
                shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
          },
        ],
      };
      this.yearLinechart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.cockpit {
  width: 98%;
  height: calc(100vh - 103px);
  margin: 16px auto;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 4px 4px;
  .cockpit-content {
    .cockpit-title {
      border-left: 6px solid #3085ff;
      font-weight: bold;
      font-size: 24px;
      color: #1b213b;
      padding-left: 5px;
      margin-top: 23px;
      margin-left: 30px;
    }
    .cockpit-info {
      display: flex;
      align-items: center;
      .cockpit-info-left {
        width: 30%;
        padding-left: 120px;
        padding-top: 40px;
        .info-left-item {
          display: flex;
          align-items: center;
          p {
            width: 100px;
          }
        }
      }
      .cockpit-info-right {
        width: 60%;
        background: #f3f7fb;
        height: 164px;
        margin-top: 30px;
        margin-left: 100px;
        display: flex;
        .info-right-left {
          width: 50%;
        }
        .info-right-right {
          width: 50%;
        }
        .info-content {
          display: flex;
          dl {
            width: 33%;
            text-align: center;
            padding-top: 10px;
            cursor: pointer;
            dt {
              font-size: 36px;
              font-weight: 600;
              padding-bottom: 5px;
            }
            dd {
              margin-left: 0;
            }
            &:nth-child(1) {
              dt {
                color: #0052d9;
              }
            }
            &:nth-child(2) {
              dt {
                color: #f1902b;
              }
            }
            &:nth-child(3) {
              dt {
                color: #f56c6c;
              }
            }
          }
        }
        .title {
          border-left: 6px solid #10c6ff;
          font-size: 16px;
          color: #4174f7;
          padding-left: 8px;
          margin-top: 20px;
          margin-left: 20px;
        }
      }
    }
    .statistics-info {
      width: 90.5%;
      margin: 37px auto 0;
      display: flex;
      justify-content: space-between;
      .statistics-item {
        width: 19%;
        height: 155px;
        background-color: #f3f7fb;
        dl {
          text-align: center;
          padding-top: 25px;
          dt {
            font-size: 20px;
            color: #0052d9;
          }
          dd {
            font-weight: 600;
            font-size: 42px;
            color: #4174f7;
            padding-top: 10px;
            margin-left: 0;
          }
        }
      }
    }
    .chart-info {
      width: 90.5%;
      margin: 50px auto 0;
      display: flex;
      .chart-info-item {
        width: 32%;
        padding-right: 25px;
        .chart-title {
          font-size: 20px;
          color: #000000;
          line-height: 23px;
          border-left: 6px solid#0064C8;
          padding-left: 5px;
        }
        .chart-table {
          width: 100%;
          height: 400px;
          overflow: auto;
          background: #f3f7fb;
          border-radius: 8px 8px 8px 8px;
          margin-top: 10px;
          margin-right: 10px;

          table {
            width: 100%;
            border-collapse: collapse;
            // padding: 10px 0;
            tr {
              &:nth-child(1) {
                position: sticky;
                top: 0;
                background: #4175f8;
                th {
                  color: #fff;
                }
              }
            }
          }
          tr {
            cursor: pointer;
            border-bottom: 1px solid #dbdbdb;
            th {
              width: 33.3%;
              text-align: center;
              padding-top: 10px;
              font-size: 16px;
              color: #1b213b;
              padding-bottom: 10px;
            }
            td {
              width: 33.3%;
              height: 20px;
              line-height: 30px;
              text-align: center;
              padding: 8px 4px;
              font-size: 18px;
              color: #505a69;
            }
          }
          .active {
            background: rgb(65, 117, 248, 0.5);
            td {
              color: #fff;
            }
          }
        }
        .tenant {
          background: #f3f7fb;
          border-radius: 8px 8px 8px 8px;
          width: 100%;
          height: 220px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 50px;
          // .tenant-right {
          //   font-weight: 600;
          //   font-size: 56px;
          //   color: #4174f7;
          //   line-height: 66px;
          //   margin-left: 15px;
          // }

          .info-content {
            display: flex;
            margin-top: -20px;
            width: 100%;
            dl {
              width: 50%;
              text-align: center;
              padding-top: 10px;
              cursor: pointer;
              dt {
                font-size: 48px;
                font-weight: 600;
                padding-bottom: 5px;
              }
              dd {
                margin-left: 0;
                font-size: 16px;
              }
              &:nth-child(1) {
                dt {
                  color: #0052d9;
                }
              }
              &:nth-child(2) {
                dt {
                  color: #f1902b;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.cockpit {
  .el-table__header tr {
    background-color: #f32e2e;
    font-weight: bold;
  }
}
</style>
